<template>
	<div>
		<!-- 编辑面板 -->
		<el-dialog :title="shs_title1" :visible.sync="dialogVisible" :width="shs_min_width" :before-close="handleClose">
			<el-form label-width="80px" :rules="rules" ref="form_up_tag" :model="form_up_tag" size="normal"
				@submit.native.prevent>
				<el-form-item :label="shs_item1" prop="tagName">
					<el-input v-model="form_up_tag.tagName" type="text" @keyup.native.enter="confim_up"></el-input>
				</el-form-item>

				<el-form-item label="封面">
					<el-upload action="none" list-type="picture-card" :on-preview="handlePictureCardPreview"
						:on-remove="handleRemove" :on-change="check_file" :auto-upload="false" :drag="false"
						:multiple="false" :show-file-list="false">
						<el-image v-if="uploadURL" class="el-upload-list__item-thumbnail" :src="uploadURL"
							tag="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>

					<!-- 预览弹窗 -->
					<el-dialog :visible.sync="dialogVisible_item2">
						<img width="100%" :src="image_item2" alt="加载失败" />
					</el-dialog>
				</el-form-item>

				<el-form-item label="快速选择">
					<el-image v-for="(url, index) in fast_select_images" :key="index"
						style="width: 100px; height: 100px; margin-left: 2px" :src="url" fit="fill"
						@click="fast_select_images_click(url)" />
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel_up">取 消</el-button>
				<el-button type="primary" @click="confim_up">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// API
	import {
		updataTags,
		upload_img,
		insertTags
	} from '@/request/api'

	export default {
		name: 'shsCeshi',
		props: {
			shs_title: {
				type: String,
				default: '标签添加'
			},
			item_name1: {
				type: String,
				default: 'null'
			},
			item_name1_con: {
				type: String,
				default: null
			},
			shs_min_width: {
				type: String,
				default: '550px'
			},
			shs_coverUrl: {
				type: String,
				default: ''
			},
			tagID: {
				type: Number,
				default: 0
			},
			shs_active: {
				type: Number,
				default: 1
			},
			dialogVisible_item: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				fast_select_images: [
					'https://shsnum.xyz/image/1.jpg',
					'https://shsnum.xyz/image/2.jpg'
				],
				dialogVisible: false,
				dialogVisible_item2: false,
				image_item2: null,
				uploadURL: '',
				shs_title1: '标签添加',
				adminID: 0,
				shs_active_item: this.shs_active,
				shs_tagID: this.tagID,
				form_up_tag: {
					tagName: '',
					coverUrl: ''
				},
				currentFile: null,
				confirm_flog: false,
				rules: {
					tagName: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		computed: {
			shs_item1() {
				return this.item_name1 + '名称'
			}
		},
		methods: {
			/* 快速选择封面 */
			fast_select_images_click(url) {
				this.form_up_tag.coverUrl = url
				this.uploadURL = url
			},

			/* 关闭弹框 */
			handleClose() {
				const hasData = this.form_up_tag.tagName || this.form_up_tag.coverUrl
				const msg = this.confirm_flog ?
					'你的数据提交失败，确定要关闭吗？' :
					'你还有数据未提交，确定要关闭吗？'

				if (hasData) {
					this.$confirm(msg)
						.then(() => {
							this.resetForm()
						})
						.catch(() => {})
				} else {
					this.resetForm()
				}
			},
			resetForm() {
				this.form_up_tag = {
					tagName: '',
					coverUrl: ''
				}
				this.dialogVisible = false
				this.image_item2 = null
				this.shs_tagID = 0
				this.uploadURL = ''
				this.shs_active_item = 1
				this.confirm_flog = false
			},

			/* 提交 */
			confim_up() {
				/* 基础校验 */
				if (!this.form_up_tag.tagName) {
					this.$message.error('请设置类别名称')
					return
				}
				if (this.form_up_tag.tagName.length < 2 || this.form_up_tag.tagName.length > 20) {
					this.$message.error('类别名称长度在 2 到 20 个字符')
					return
				}
				if (!this.currentFile && !this.form_up_tag.coverUrl) {
					this.$message.error('请选择图片')
					return
				}

				this.confirm_flog = true

				/* 构造参数 */
				const baseObj = {
					userID: JSON.parse(localStorage.getItem('userinfo'))?.userID || 0,
					tagName: this.form_up_tag.tagName,
					Cover: this.form_up_tag.coverUrl,
					active: this.shs_active_item
				}

				/* 上传图片（如有） */
				const handleImage = () => {
					if (!this.currentFile) return Promise.resolve(this.form_up_tag.coverUrl)
					const formdata = new FormData()
					formdata.append('single_image_file', this.currentFile.raw)
					return upload_img(formdata).then(res => {
						if (res?.data?.code === 1) return res.data.path
						return Promise.reject(res?.data?.msg || '上传失败')
					})
				}

				handleImage()
					.then(path => {
						const obj = {
							...baseObj,
							Cover: path
						}
						const api = this.shs_tagID !== 0 ? updataTags : insertTags
						if (this.shs_tagID !== 0) obj.tagID = this.shs_tagID
						return api(obj)
					})
					.then(res => {
						if (res.data.code === 200) {
							this.$notify.success(res.data.msg)
							this.$emit('list_change', res.data)
							this.resetForm()
						} else {
							this.$notify.error(res.data.msg)
						}
					})
					.catch(err => {
						this.$notify.error(err.toString())
					})
			},

			/* 图片预览 */
			handlePictureCardPreview(file) {
				this.dialogVisible_item2 = true
				this.image_item2 = URL.createObjectURL(file.raw)
			},

			/* 移除图片 */
			handleRemove() {
				this.currentFile = null
			},

			/* 选择图片 */
			check_file(file) {
				this.currentFile = file
				this.uploadURL = URL.createObjectURL(file.raw)
				this.form_up_tag.coverUrl = this.uploadURL
			},

			/* 取消 */
			cancel_up() {
				this.resetForm()
			}
		},

		mounted() {
			this.adminID = JSON.parse(window.localStorage.getItem('adminID'))
			this.dialogVisible = this.dialogVisible_item
			this.uploadURL = this.shs_coverUrl
			this.form_up_tag.coverUrl = this.uploadURL
		},

		watch: {
			dialogVisible(val) {
				this.$emit('dialogVisible_item_change', val)
			},
			dialogVisible_item(val) {
				this.form_up_tag.tagName = null
				this.shs_active_item = this.shs_active
				if (this.shs_title === '标签编辑') {
					this.uploadURL = this.shs_coverUrl
					this.form_up_tag.coverUrl = this.shs_coverUrl
					this.form_up_tag.tagName = this.item_name1_con || ''
				}
				this.dialogVisible = val
			},
			shs_coverUrl(val) {
				this.uploadURL = val
				this.form_up_tag.coverUrl = val
			},
			tagID(val) {
				this.shs_tagID = val
			},
			shs_title(val) {
				this.shs_title1 = val
			}
		}
	}
</script>

<style scoped>
</style>